<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="follow-editor" v-if="module" v-cloak>
        <el-tabs :stretch="true" v-model="activeTab">
            <el-tab-pane label="基础" name="base">
                <el-form size="mini" label-width="90px">
                    <el-form-item label="提示文字">
                        <div class="inline">
                            <el-input style="width: 250px" size="mini" v-model="module.data.titleText"
                                placeholder="请输入"></el-input>
                            <el-color-picker v-model="module.data.titleColor" size="mini"></el-color-picker>
                        </div>
                    </el-form-item>

                    <el-form-item label="左侧图标" vertical-align="middle"><div class="inline" style="height: 100%;">
                        <image-picker width="24" height="24" v-model="module.data.icon" /></div>
                    </el-form-item>

                    <el-form-item label="按钮文字">
                        <div class="inline">
                            <el-input style="width: 250px" size="mini" v-model="module.data.btnText"
                                placeholder="请输入"></el-input>
                            <el-color-picker v-model="module.data.btnColor" size="mini"></el-color-picker>
                        </div>
                    </el-form-item>

                    <el-form-item label="点击后跳转">
                        <link-editor size="mini" v-model="module.data.link"></link-editor>
                    </el-form-item>

                </el-form>
            </el-tab-pane>

            <el-tab-pane label="标题" name="header">
                <header-editor :module="module.header" v-if="module.header"></header-editor>
            </el-tab-pane>

            <el-tab-pane label="样式" name="style">
                <module-style-editor :module="module"></module-style-editor>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import FontEditor from "./base/FontEditor";
import LinkEditor from "@/components/LinkEditor";
import HeaderEditor from "./base/HeaderEditor";
import ModuleStyleEditor from "./ModuleStyleEditor/Index";
import VueInputTag from "vue-input-tag";
import ImagePicker from "@/components/ImagePicker";

export default {
    components: {
        FontEditor,
        LinkEditor,
        ModuleStyleEditor,
        HeaderEditor,
        VueInputTag,
        ImagePicker,
    },
    data () {
        return {
            predefineColors: ["#f9f9f9", "#f4f4f4", "#cecece"],
            activeTab: "base",
            loading: false,
            tagValue: "",
            // 标题的样式
            styleItems: [
                { name: "1", value: "normal" },
                { name: "2", value: "round" },
            ],
        };
    },

    watch: {},

    computed: {
        module: function () {
            return this.$store.state.pagemaker.currentModule;
        },
    },
    methods: {
        styleChangeHandle: function (val) {
            this.$set(this.module, "styleName", val);
        },
    },
};
</script>

<style scoped>
.inline {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
</style>
